<template>
  <div class="home-container">
    <div class="header">
      <div class="search">
        <div class="search-left" @click="$router.push('/homehistory')">
          <SeachView></SeachView>
        </div>
        <div class="search-right" @click="tomap">
          <span>{{ locationInfo1.name || locationInfo1.city }}</span>
          <van-icon name="arrow-down" />
        </div>
      </div>
      <div class="swipper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in info.banner" :key="item.id">
            <img :src="item.image_url" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="tabber-container">
        <van-tabbar
        route
          v-model="active"
          :fixed="false"
          class="home-nav-tabber"
          active-color="#666666"
          :border="false"
        >
          <van-tabbar-item
            v-for="(item, index) in info.channel"
            :key="index"
            :to="item.url"
          >
            <span>{{ item.name }}</span>
            <template #icon="props">
              <img :src="props.active ? item.icon_url : item.icon_url" />
            </template>
          </van-tabbar-item>
        </van-tabbar>
      </div>
    </div>

    <div class="blank-middle"></div>

    <div class="brand-Supply">
      <h3>品牌制造商直供</h3>
      <div class="brand-card-container">
        <CardView
          v-for="item in info.brandList"
          :key="item.id"
          :obj="item"
        ></CardView>
      </div>
    </div>

    <div class="new-good-start" @click="goGoodsStart(0)">
      <img src="./images/four.png" alt="" />
    </div>

    <div class="new-good">
      <van-grid direction="horizontal">
        <van-grid-item v-for="item in info.newGoods" :key="item.id">
          <GoodView :info="item"></GoodView>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="sentiment-recommend" @click="goGoodsStart(1)">
      <img src="./images/five.png" alt="" />
    </div>

    <div class="good-sentiment-recommend">
      <van-grid direction="horizontal">
        <van-grid-item v-for="item in info.hotGoods" :key="item.id">
          <GoodView :info="item"></GoodView>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="blank-middle"></div>

    <div class="topic-select">
      <h2>专题精选</h2>
      <van-grid :border="false" :column-num="3" >
        <van-grid-item v-for="item in info.topicList" :key="item.id" @click.native="toTopicdetail(item.id)">
          <TopicSelect :info="item"></TopicSelect>
        </van-grid-item>
      </van-grid>
    </div>

    <TitleView
      v-for="item in info.newCategoryList"
      :key="item.id"
      :info="item"
      :bgc='bgc'
    ></TitleView>
  </div>
</template>

<script>
import { getHomeInfo } from "@/api/home";
import CardView from "./components/CardView";
import GoodView from "./components/GoodView";
import TopicSelect from "./components/TopicSelect";
import TitleView from "./components/TitleView";
import SeachView from "./components/SeachView";
import { mapState } from "vuex";

export default {
  components: { CardView, GoodView, TopicSelect, TitleView, SeachView },
  data() {
    return {
      value: "",
      active: 0,
      info: {},
      locationInfo1: {},
      bgc:['135deg, #296AFF 0%, #52C5FF 100%','140deg, #FCA334 0%, #FDD036 100%','149,255,0,0.95) 0%, #4FCB11 100%','68,240,255,0.95) 0%, #009AD0 100%','90deg, #8B3AF7 17%, #F16CFF 83%','90deg, #FF74A5 18%, #FFBFCD 83%','144deg, #5C51EB 0%, #A097FF 100%','-40deg, #FFC781 0%, #FF9650 100%','196,222,37,0.95) 0%, #4AB216 100%']
    };
  },
  computed: {
    ...mapState(["locationInfo"]),
  },
  methods: {
    async getdata() {
      let res = await getHomeInfo();
      this.info = res;
    },
    goGoodsStart(num) {
      this.$router.push({ name: "HotAndNewView", query: { id: num } });
    },
    toTopicdetail(id) {
      this.$router.push({path:"/TopicDetail",query:{id}});
    },
    tomap() {
      this.$router.push("/homemap");
      this.$store.commit("LACATION", this.locationInfo1);
    },
  },
  created() {
    this.getdata();
  },
  mounted() {
    if (this.locationInfo.name) {
      this.locationInfo1 = this.locationInfo;
    } else {
      AMap.plugin("AMap.CitySearch", () => {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity((status, result) => {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            this.locationInfo1 = result;
            this.$store.commit("LACATION", result);
          }
        });
      });
    }
  },
};
</script>

<style scoped lang='scss'>
.home-container{
  padding-bottom: 100px;
}
.header {
  background-color: #fff;
  padding: 0 20px 0 20px;
  .search {
    height: 70px;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    box-sizing: content-box;
    .search-left {
      width: 539px;
      height: 100%;
    }
    .search-right {
      font-size: 30px;
      height: 100%;
      @include center;
    }
  }
}

.swipper {
  height: 343px;
  margin-bottom: 47px;
  img {
    height: 343px;
    width: 710px;
  }
}
.tabber-container {
  padding: 0 20px 0 20px;
  height: 122px;
  img {
    width: 69px;
    height: 69px;
    margin-bottom: 16px;
  }
}
.blank-middle {
  padding: 0 20px 0 20px;
  height: 19px;
}
.brand-Supply {
  height: 570px;
  padding: 41px 20px 0 20px;
  h3 {
    margin-bottom: 33px;
    font-size: 38px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
    text-align: center;
  }
  .brand-card-container {
    height: 402px;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
  }
}
.new-good-start {
  background-color: #f8f8f8;
  padding: 0 20px 0 20px;
  width: 100%;
  height: 242px;
  img {
    width: 100%;
    height: 100%;
  }
}
.new-good {
  padding: 0 20px 0 20px;
  background-color: #fff;
  height: 491px;
  padding: 37px 0 69px 0;
  overflow-x: auto;
  .van-grid {
    flex-wrap: nowrap;
  }
}
.sentiment-recommend {
  padding: 0 20px 0 20px;
  background-color: #f8f8f8;
  width: 100%;
  height: 242px;
  img {
    width: 100%;
    height: 100%;
  }
}
.good-sentiment-recommend {
  padding: 0 20px 0 20px;
  height: 491px;
  overflow-x: auto;
  .van-grid {
    flex-wrap: nowrap;
  }
}
.topic-select {
  padding: 0 20px 0 20px;
  width: 100%;
  height: 626px;
  padding: 41px 0 79px 0;
  overflow-x: auto;
  h2 {
    text-align: center;
    font-size: 38px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 600;
  }
  .van-grid {
    flex-wrap: nowrap;
  }
}
</style>